Motion >> Repos - motion-next.git/blob

   1 <md-menu md-position-mode="target-right target">
   2   <div ng-click="$mdMenu.open($event)">
   3     <ms-color-picker-button>
   4       <md-button
   5         aria-label="Row Color"
   6         md-menu-origin
   7         ng-click="$mdMenu.open($event)"
   8         ng-class="vm.selectedColor.class"
   9       >
  10         <span ng-show="vm.selectedColor.palette">
  11           {{vm.selectedColor.palette}} {{vm.selectedColor.hue}}
  12         </span>
  13         <span ng-show="!vm.selectedColor.palette"> Select Color </span>
  14       </md-button>
  15     </ms-color-picker-button>
  16   </div>
  17
  18   <md-menu-content class="ms-material-color-picker-menu-content" layout-column>
  19     <header
  20       ng-class="vm.selectedColor.class || 'md-accent-bg'"
  21       class="md-whiteframe-4dp"
  22       layout="row"
  23       layout-align="space-between center"
  24     >
  25       <md-button
  26         md-prevent-menu-close
  27         ng-click="vm.activateHueSelection(false,false)"
  28         class="md-icon-button"
  29         ng-class="{'hidden':!vm.selectedPalette}"
  30         aria-label="Palette"
  31       >
  32         <md-icon md-font-icon="icon-arrow-left" class="s20"></md-icon>
  33       </md-button>
  34
  35       <span ng-if="vm.selectedColor.palette">
  36         {{vm.selectedColor.palette}} {{vm.selectedColor.hue}}
  37       </span>
  38
  39       <span ng-if="!vm.selectedColor.palette"> Select Color </span>
  40
  41       <md-button
  42         class="remove-color-button md-icon-button"
  43         ng-click="vm.removeColor()"
  44         aria-label="Remove Color"
  45       >
  46         <md-icon md-font-icon="icon-delete" class="s20"></md-icon>
  47       </md-button>
  48     </header>
  49
  50     <div class="colors" ms-scroll>
  51       <div ng-show="!vm.selectedPalette" layout="row" layout-wrap>
  52         <div
  53           class="color"
  54           ng-class="'md-'+palette+'-500-bg'"
  55           ng-repeat="(palette, hues) in vm.palettes"
  56           ng-click="vm.activateHueSelection(palette,hues)"
  57           layout="row"
  58           layout-align="start end"
  59           md-prevent-menu-close
  60           md-ink-ripple
  61         >
  62           <span class="label"> {{palette}} </span>
  63         </div>
  64       </div>
  65
  66       <div ng-show="vm.selectedPalette" layout="row" layout-wrap>
  67         <div
  68           class="color"
  69           ng-class="'md-'+vm.selectedPalette+'-'+hue+'-bg'"
  70           ng-repeat="(hue, values) in vm.selectedHues"
  71           ng-click="vm.selectColor(vm.selectedPalette,hue)"
  72           layout="row"
  73           layout-align="start end"
  74           md-ink-ripple
  75         >
  76           <span class="label"> {{hue}} </span>
  77           <i
  78             ng-if="vm.selectedPalette == vm.selectedColor.palette && hue == vm.selectedColor.hue"
  79             class="s16 icon-check"
  80           >
  81           </i>
  82         </div>
  83       </div>
  84     </div>
  85   </md-menu-content>
  86 </md-menu>